<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钟表</title>

    <style>
                .clock{
                        width: 200px;
                        height: 200px;
                        margin: 100px auto;
                        border: 10px solid #000000;
                        border-radius: 110px;
                        position: relative;
                }

                .line{
                        width: 4px;
                        background: grey;
                        position: absolute;
                        height: 100%;
                        left: 50%;
                        margin-left: -2px;
                }
                .line2{
                     transform: rotate(30deg);
                }
                .line3{
                    transform: rotate(60deg);
                }
                .line4{
                    transform: rotate(90deg);
                }
                .line5{
                    transform: rotate(120deg);
                }
                .line6{
                    transform: rotate(150deg);
                }

                .line1,.line4{
                     width: 6px;
                      margin-left: -3px;
                }

                .cover{
                        height: 160px;
                        width: 160px;
                        background: #FFFFFF;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        border-radius: 80px;
                        margin-left: -80px;
                        margin-top: -80px;
                }

                .hour{
                        height: 60px;
                        width: 6px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        background: pink;
                        margin-left: -3px;
                        margin-top: -60px;
                        /*自己计算，*/
                        animation: change 3600s steps(60) infinite ;
                        transform-origin: bottom center;
                }

                .minute{
                        height: 70px;
                        width: 4px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        background: green;
                        margin-left: -2px;
                        margin-top: -70px;
                        animation: change 3600s steps(60) infinite ;
                        transform-origin: bottom center;
                }

                .second{
                    height: 80px;
                    width: 2px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    background: #F50A45;
                    margin-left: -1px;
                    margin-top: -80px;
                    animation: change 60s steps(60) infinite ;
                    transform-origin: bottom center;
                }

                .dotted{
                      width: 20px;
                      height: 20px;
                      border-radius: 10px;
                      left: 50%;
                      top: 50%;
                      position: absolute;
                      background: black;
                      margin-left: -10px;
                      margin-top: -10px;
                }
        
                @keyframes change {
                      from{
                          transform: rotate(0deg);
                      }
                      to{

                          transform: rotate(360deg);
                      }
                }

    </style>

</head>
<body>
    <div class="clock">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
        <div class="cover"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="dotted"></div>
    </div>

</body>
</html>